jQuery(function($){
   
   //Khai bao 1 bien cuc bo de bao vi tri hien thoi
   //
   currentPos = 0;//vi tri tren thanh slidebar
   realIndex =0; //So lan truy van vao co so du lieu;
   maxImage = 0;
    $('.thumb').first().children('img').css({opacity: 1.0});
    $('#btn_left').first().children('img').attr("src","images/SlideControl/left-white.png");
    //$('#btn_left').hover({cursor:auto},{cursor:auto});
   
   //Display 4 image when init
 
   arrayThumb = $('.thumb');
   maxImage= arrayThumb.length;
   count = maxImage;
   if(count>0)
   {          
       if(count >4)
           {
               //An tat ca cac anh da load
               for(j =4; j< count; j++)
                   {
                       $('.thumb').eq(j).hide();
                   }
              count =4;
           }

        for (i =1; i< count; i++)
           {
               $('.thumb').eq(i).children('img').css({opacity:0.8});
           }
   }   
   
    $('.thumb').click(function()
    {
        $('.thumb').eq(currentPos).children('img').css({opacity: 0.8});
        $(this).children('img').css({opacity: 1.0});
         image = $(this).children('img').attr("src");
         
         //Tim kiem vi tri hien tai
         var thumbnail = $(this).parent();
            for (var i = 0; i < thumbnail.children().length; i++) {
                    if (thumbnail.children().get(i) == this) {
                            currentPos = i ;
                            break;
                    }
            }
         
         $('#index').text(currentPos+1);
         path = image.replace("thumbSlide","ImageSlide");
         $('#main_view').children('img').attr("src",path);
    })   
  
     
   $('#btn_left').click(function(){ ///lui
       
       module = currentPos % 4;
       if(module !=0)
           {
                $('.thumb').eq(currentPos).children('img').css({opacity: 0.8});
                $('.thumb').eq(currentPos-1).children('img').css({opacity: 1.0});
                currentPos --;
                
                image = $('.thumb').eq(currentPos).children('img').attr("src");
                path = image.replace("thumbSlide","ImageSlide");
                $('#main_view').children('img').attr("src",path);
                
           }
       else 
           {
               $('.thumb').eq(currentPos-4).hide();
               $('.thumb').eq(currentPos+1).show();              
                currentPos++;
                image = $('.thumb').eq(currentPos).children('img').attr("src");
                path = image.replace("thumbSlide","ImageSlide");
                $('#main_view').children('img').attr("src",path);
           }
   })
   
   $('#btn_right').click(function(){
       
       module = currentPos % 4;
       if(module != 3)
           {
                $('.thumb').eq(currentPos).children('img').css({opacity: 0.8});
                $('.thumb').eq(currentPos+1).children('img').css({opacity: 1.0});
                currentPos ++;
                
                image = $('.thumb').eq(currentPos).children('img').attr("src");
                path = image.replace("thumbSlide","ImageSlide");
                $('#main_view').children('img').attr("src",path);
           }
       else 
           {
               $('.thumb').eq(currentPos-3).hide();
               $('.thumb').eq(currentPos+1).show(); 
               $('.thumb').eq(currentPos+1).children('img').css({opacity: 1.0});
                currentPos++;
                image = $('.thumb').eq(currentPos).children('img').attr("src");
                path = image.replace("thumbSlide","ImageSlide");
                $('#main_view').children('img').attr("src",path);
           }           
      
   })
   
});


